<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      #outer {
        padding: 20px;
        background: #616161;
      }

      #inner {
        width: 100px;
        height: 100px;
        background: #757575;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
    <script>
      const $inner = document.querySelector("#inner");
      const $outer = document.querySelector("#outer");

      function handler() {
        console.log("click"); // 直接输出

        Promise.resolve().then((_) => console.log("promise")); // 注册微任务

        setTimeout((_) => console.log("timeout")); // 注册宏任务

        requestAnimationFrame((_) => console.log("animationFrame")); // 注册宏任务

        $outer.setAttribute("data-random", Math.random()); // DOM属性修改，触发微任务
      }

      new MutationObserver((_) => {
        console.log("observer");
      }).observe($outer, {
        attributes: true,
      });

      $inner.addEventListener("click", handler);
      $outer.addEventListener("click", handler);

      document.body.addEventListener("click", (_) => console.log("click"));

      document.body.click();
      document.body.dispatchEvent(new Event("click"));
      console.log("done");

      new MutationObserver((_) => {
        console.log("observer");
        // 如果在这输出DOM的data-random属性，必然是最后一次的值，不解释了
      }).observe(document.body, {
        attributes: true,
      });

      document.body.setAttribute("data-random", Math.random());
      document.body.setAttribute("data-random", Math.random());
      document.body.setAttribute("data-random", Math.random());
    </script>
  </body>
</html>
